<template>
  <div class="configDataPromise">

    
      <el-dialog
      title="配置权限"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="800px">
      <el-tabs v-model="activeName" @tab-click="handleClick">
    <div>
      <div style="display: flex; margin-bottom: 30px">
        <el-input
          v-model="customerShopQueryParams.name"
          filterable
          placeholder="查询已选数据"
          style="margin-right: 30px; width: 300px"
        >

        </el-input>

        <el-button
          style="margin-right: 30px"
          type="primary"
          :loading="bindLoading"
          @click="getList"
          >搜索</el-button>


          <el-button
          style="margin-right: 30px"
          type="primary"
          :loading="bindLoading"
          @click="addConfigData"
          >新增权限</el-button>
      </div>
    </div>
     <!-- :disabled="activeName=='factory'" -->
    <el-tab-pane label="品牌权限" name="shop" :disabled="currentCustomer.type!=null && currentCustomer.type=='factory'">
        <p>以下权限已经绑定</p>
        <el-table :data="shopList" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180"> </el-table-column>
        <el-table-column prop="name" label="店铺名称" width="160">
        </el-table-column>
        <el-table-column prop="phone" label="店铺电话"> </el-table-column>

        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" type="success">上架</el-tag>
            <el-tag v-if="scope.row.status == 2" type="danger">下架</el-tag>
               <el-tag v-if="scope.row.status == 'NORMAL'" type="success">上架</el-tag>
            <el-tag v-if="scope.row.status == 'STOP'" type="danger">下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-popconfirm
              style="margin-left: 10px"
              title="您确定取消关联当前店铺吗？"
              @confirm="deleteShopStaff(scope.row)"
            >
              <el-button type="text" size="small" slot="reference"
                >解绑</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="customerShopQueryParams.total > 0"
        :total="customerShopQueryParams.total"
        :page.sync="customerShopQueryParams.pageNo"
        :limit.sync="customerShopQueryParams.pageSize"
        @pagination="getList"
      />

    </el-tab-pane>
     <!-- :disabled="activeName=='shop'" -->
     <el-tab-pane label="工厂权限" name="factory"  :disabled="currentCustomer.type!=null && currentCustomer.type=='shop'"> 
         <p>以下权限已经绑定</p>
        <el-table :data="shopList" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180"> </el-table-column>
        <el-table-column prop="name" label="工厂名称" width="160">
        </el-table-column>
        <el-table-column prop="phone" label="工厂联系电话"> </el-table-column>

        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" type="success">上架</el-tag>
            <el-tag v-if="scope.row.status == 2" type="danger">下架</el-tag>
               <el-tag v-if="scope.row.status == 'NORMAL'" type="success">上架</el-tag>
            <el-tag v-if="scope.row.status == 'STOP'" type="danger">下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-popconfirm
              style="margin-left: 10px"
              title="您确定取消关联当前店铺吗？"
              @confirm="deleteShopStaff(scope.row)"
            >
              <el-button type="text" size="small" slot="reference"
                >解绑</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="customerShopQueryParams.total > 0"
        :total="customerShopQueryParams.total"
        :page.sync="customerShopQueryParams.pageNo"
        :limit.sync="customerShopQueryParams.pageSize"
        @pagination="getList"
      />

    </el-tab-pane>
     </el-tabs>
    </el-dialog> 
    
  <choseConfigData v-if="chooseVisible" @close-chose-event="closeChoseDialog" :type="activeName" :currentCustomer="currentCustomer" :chooseVisible="chooseVisible"></choseConfigData>
  </div>

</template>

<script>

import {
  getBindList
} from "@/api/shop/index";


import {
    unbindShopUser
} from "@/api/customer/index";

import  choseConfigData from '@/components/ConfigDataPromise/choseConfigData'



export default {
  name: "configDataPromise",
  components:{choseConfigData},
  props:{
    dialogVisible:Boolean,
    currentCustomer:Object
  },
  data() {
    return {

        selectedShop:"",
        activeName:"shop",//shop 和factory
        idleShopList:[],
        shopList:[],
        chooseVisible:false,
        bindLoading:false,
        customerShopQueryParams: {
        bindType:this.activeName,
        action: "bind",
        userId:this.currentCustomer.userId,
        pageNo: 1,
        name:"",
        pageSize:10,
        limit: 10,
        total: 0,
      },
     
    };
  },
  mounted(){
   
      let item=this.currentCustomer
      if(item.type){
       this.activeName=item.type
      }
      // console.log("item===》",item)
      this.getList(item)

  },
  created() {
     
    
  },
  methods: {



    closeChoseDialog(type){
      if(type){
        this.activeName=type
        this.currentCustomer.type=type
      }
     this.chooseVisible=false
     this.getList(this.currentCustomer)
    },


    addConfigData(){
      this.chooseVisible=true

    },

    getPageShopList(e){
          //  console.info(this.customerShopQueryParams)
    },

    handleClick(){
    
    //  console.log("切换了数据",this.activeName)



    },




    getList(item){
  
      getBindList({... this.customerShopQueryParams,
        bindType:this.activeName
      }).then(res=>{
        this.shopList=res.data.records
        if(this.shopList.length==0){
           this.currentCustomer.type=null
        }
        this.customerShopQueryParams.total = res.data.total;
        this.customerShopQueryParams.page = res.data.current;
        this.customerShopQueryParams.limit = res.data.size;

      })

    },

    
    handleClose() {
      this.idleShopList = [];
      this.shopList = [];
      this.selectedShop = "";
      this.$emit('close-event')
    },

   
    deleteShopStaff(item) {
      unbindShopUser({
        shopId: item.id,
        userId: this.currentCustomer.userId,
      }).then((res) => {
        this.$message.success("解绑成功");
        this.getList(this.currentCustomer);
      });
    },

      getCustomerShopList({ page, limit }) {
      getCustomerShopList({
        userId: this.currentCustomer.userId,
        pageNo: page || this.customerShopQueryParams.page,
        pageSize: limit || this.customerShopQueryParams.limit,
      }).then(({ data }) => {
        this.shopList = data.records;
        this.customerShopQueryParams.total = data.total;
        this.customerShopQueryParams.page = data.current;
        this.customerShopQueryParams.limit = data.size;
      });
    },

    bindShop() {
      if (this.selectedShop === "") {
        this.$message.error("请选择员工");
        return;
      }
      this.bindLoading = true;
      bindShopUser({
        shopId: this.selectedShop,
        userId: this.currentCustomer.userId,
      })
        .then((res) => {
          this.bindLoading = false;
          this.selectedShop = "";
          this.$message.success("绑定成功");
          this.getList(this.currentCustomer);
        })
        .catch(() => {
          this.bindLoading = false;
        });
    },

    
   
  },
};
</script>

<style scoped lang="scss">





</style>
